<template>
  <div v-show="addresstate" style="width: 60%;height: 80%;position: fixed;z-index: 1000;left: 20%;top: 10%;">
    <el-input placeholder="请输入内容" v-model="address" class="input-with-select" @input="searchaddres(1)">
      <el-select v-model="select" slot="prepend" placeholder="请选择">
        <el-option label="平度市" value="平度"></el-option>
        <el-option label="武汉市" value="武汉"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="searchaddres"></el-button>
    </el-input>
    <ul class="infinite-list" v-if="searchstate" v-infinite-scroll="load"
      style="overflow:auto;z-index: 99999;position: absolute;cursor: pointer;top: 6.8%;left: 14.3%;width: 60%;height: 40%;background-color: #FFFFFF;color: #000000;">
      <div v-for="(item, index) in addressList" :key="index"
        style="display: flex;flex-direction: column;margin: 20px;box-sizing: border-box;border-bottom: 1px solid #D3D4D6;"
        @click="choose(item)">
        <div>{{ item.title }}</div>
        <div>{{ item.address }}</div>
      </div>
    </ul>
    <div :id="mapKey" style="width: 100%;height: 80%;"></div>
    <div style="width: 100%;display: flex;height: 50px;">
      <div style="width: 50%;background-color: #67C23A;text-align: center;line-height: 50px;cursor: pointer;"
        @click="onsub(false)">
        取消
      </div>
      <div style="width: 50%;background-color: #409EFF;text-align: center;line-height: 50px;cursor: pointer;"
        @click="onsub(true)">
        确认
      </div>
    </div>
  </div>
</template>

<script>
var count = 10086;
export default {
  name: "addressmap",
  data() {
    return {
      inputForm: {
        latitude: "",
        longitude: ""
      },
      latitude: "",
      longitude: "",
      markersArray: [],
      select: "",
      address: "",
      searchstate: false,
      addressList: [],
      addressitem: {},
      addresstate: false,
      mapKey: ""
    };
  },
  mounted() {
    this.mapKey = "containepic" + ++count;
  },
  methods: {
    open(type, obj = {}) {
      this.addresstate = true;
      this.initMap(type, obj.latitude, obj.longitude);
    },
    //根据输入的地址 模糊搜索
    searchaddres(type = 0) {
      if (!type && !this.address) {
        this.$message({
          message: "请输入后点击搜索！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        keyword: this.address,
        region: "平度",
        output: "jsonp",
        page_index: 1,
        page_size: 20,
        region_fix: 1,
        get_subpois: 0,
        policy: 1
      };
      this.$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion", data).then(
        data => {
          this.addressList = data.data;
          this.searchstate = true;
          if (data.data && data.data.length == 0) {
            this.searchstate = false;
          }
        }
      );
    },
    init(location) {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        location: location,
        output: "jsonp"
      };
      return this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/", data).then(
        data => {
          data.result.ad_info.address = data.result.address;
          this.addressitem = data.result.ad_info;
        }
      );
    },
    //选择搜索结果
    choose(item) {
      this.initMap(true, item.location.lat, item.location.lng);
      this.searchstate = false;
      console.log(item, 111111111);
      this.addressitem = item;
    },
    load() { },
    onsub(type) {
      console.log(type);
      if (type) {
        if (JSON.stringify(this.addressitem) === "{}") {
          console.log(this.addressitem);
          this.$message({
            message: "请选择地址！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        } else {
          console.log(this.latitude, this.longiistude);
          this.addresstate = false;
          if (this.latitude) this.addressitem.location.lat = this.latitude;
          if (this.longiistude) this.addressitem.location.lng = this.longiistude;
          console.log(this.addressitem, 123);
          this.address = '';
          this.$emit("address", this.addressitem);
        }
      } else {
        this.addresstate = false;
      }
    },
    async initMap(type, longitude, latitude) {
      var that = this;
      let lat = "36.752508224779746";
      let logt = "119.97121810913086";
      let address = "山东省青岛市平度市杭州路"
      if (type) {
        lat = latitude;
        logt = longitude;
        await this.init(lat + ',' + logt)
        // this.addressitem
        var center = new qq.maps.LatLng(lat, logt);
      } else {
        if (this.inputForm.latitude === "") {
          await this.init(lat + ',' + logt)

          var center = new qq.maps.LatLng(lat, logt);


        } else {
          var center = new qq.maps.LatLng(
            this.inputForm.latitude,
            this.inputForm.longitude
          );
        }
      }
      var map = new qq.maps.Map(document.getElementById(this.mapKey), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      that.markersArray.push(marker);
      var infoWin = new qq.maps.InfoWindow({
        map: map
      }); //此处是点击地图后生成的地标名称
      var geocoder = new qq.maps.Geocoder({
        complete: function (res) {
          that.deleteOverlays();
          map.setCenter(res.detail.location);
          var marker = new qq.maps.Marker({
            map: map,
            position: res.detail.location
          });
          that.markersArray.push(marker);
        }
      });
      // console.log(document.getElementById("containepic"));
      qq.maps.event.addListener(map, "click", function (event) {
        that.deleteOverlays();
        console.log(event, "点击后的地址");
        that.latitude = event.latLng.getLat();
        that.longiistude = event.latLng.getLng();
        that.inputForm.longitude = that.longiistude;
        that.inputForm.latitude = that.latitude;
        var position = new qq.maps.LatLng(
          that.inputForm.latitude,
          that.inputForm.longitude
        );
        var marker = new qq.maps.Marker({
          map: map,
          position: position
        });
        console.log(that.latitude, that.longiistude);
        that.markersArray.push(marker);
        that.init(event.latLng.getLat() + "," + event.latLng.getLng());
      });
      // document.getElementById("handleinput").addEventListener("blur", function() {
      // 	geocoder.getLocation(that.inputForm.shopAddress);
      // });
    },
    deleteOverlays() {
      if (this.markersArray) {
        for (var i in this.markersArray) {
          this.markersArray[i].setMap(null);
        }
        this.markersArray.length = 0;
      }
    }
  }
};
</script>

<style scoped lang="less">
.el-select .el-input {
  width: 130px;
}
</style>
